<?php
require_once(dirname(__FILE__) . "/start.inc");
global $CONFIG;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>A/B Tester - </title>
		<?php include("views/html_includes.php");?>
		<script type="text/javascript">
			var frameJsLoaded = false;
			tester = null;
			function unblock() {
				$('div.frame-container iframe').css("visibility", "visible");
				$('div.frame-container').unblock();
				tester = $("body *", $('#editFrame').get(0).contentWindow.document).not(":hidden").abTester({
					window: $('#editFrame').get(0).contentWindow
				});
				tester.overlay();
				frameJsLoaded = true;
			}
            function getTestingUrl() {
                var testingUrl = "";
                var current_url = location.href;
                if (current_url) {
                    var fragmentStart = current_url.indexOf('#');
                    if (fragmentStart !== false) {
                        var testingUrl = current_url.substr(fragmentStart + 1);
                        //if (testingUrl.indexOf('http://') !== 0 && testingUrl.indexOf('https://') !== 0) {
                        //   testingUrl = 'http://' + testingUrl;
                        //}
                    }
                }
                return testingUrl;
            }
			$(document).ready(function(){
				$('div.frame-container').block({
					message: '<h1>Processing...</h1>',
					css: { height: '80px' },
					overlayCSS: {backgroundColor: '#fff', 'opacity': 1}
				});

                var testingUrl = getTestingUrl();
                if (testingUrl) {
                    $(".ex-title").html('Edit: ' + testingUrl);
                    if (testingUrl.indexOf('http://') !== 0 && testingUrl.indexOf('https://') !== 0) {
                       testingUrl = 'http://' + testingUrl;
                    }
                    $("#editFrame").attr('src', "<?php echo $CONFIG->getLocalhostUrl();?>/edit/" + testingUrl);
                    $("#editFrame").load(function(){
                        unblock();
                    });
                }

				$('#container').click(function(event){
					if (frameJsLoaded) {
							tester.unOverlay();
					}
				});

                // save js code
                $("#save-button").click(function(event){
                    var versionName = "Version ";
                    var url = getTestingUrl();
                    var does = $.abTester.editor().getDoes();
                    var content = does ? does.join('\n') : "";
	                if (content.length > 0) {
		                var vid = $("#cv-list li.selected").length == 1 ? $("#cv-list li.selected").attr("vid") : 0;
                        $.post('save', {name: versionName, url: url, content: content, vid: vid}, function(data){
							if (data.result == false) {
								alert(data.message);
							}
                        }, 'json');
	                } else {
		                console.log("Not change for the page")
	                }
                });

                $("#cv-list li").click(function(){
                    var vId = $(this).attr('vid');
	                $(this).siblings().removeClass("selected");
	                $(this).addClass("selected");
                    var testingUrl = getTestingUrl();
                    if (testingUrl.indexOf('http://') !== 0 && testingUrl.indexOf('https://') !== 0) {
                        testingUrl = 'http://' + testingUrl;
                    }
                    if (testingUrl.indexOf('&') !== -1) {
                        testingUrl += "&vId=" + vId;
                    } else {
                        testingUrl += "?vId=" + vId;
                    }
                    $("#editFrame").attr('src', "<?php echo $CONFIG->getLocalhostUrl();?>/edit/" + testingUrl);
                    $("#editFrame").load(function(){
                        unblock();
                    });
                });
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<?php include("views/login_block.php");?>
			</div>
			<div id="main">
				<div class="wrapper">
					<div id="container">
						<div class="ex-title-container">
							<div class="ex-title"></div>
						</div>
						<div class="controls-container">
							<div class="edit-container">
								<a id="save-button" href='javascript://'>Save</a>
								<a id="undo-button" href='javascript://'>Undo</a>
								<a id="redo-button" href='javascript://'>Redo</a>
							</div>
						</div>
                        <div id="sections">
                            <div id="option-container">
                                <div id="modes-container" class="">
                                    <a class="editing selected"><span>Editing Mode</span></a>
                                    <a class="interactive right"><span>Interactive Mode</span></a>
                                </div>
                            </div>
                        </div>
						<div class="frame-container">
							<div class="frame-padding">
								<div class="edit-view">
									<iframe id='editFrame'></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--div id='ab-dialog' style="display: none;">
					<div class="edit-html pane" style="display: block;">
                        <p>Enter HTML to replace the selected element.</p>
                        <textarea id="html-editor" cols="68" rows="7"></textarea>
                    </div>
                </div-->
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>